<template>
  <div class="page pingshen">
    <el-card class="box-card">
       <el-form :model="form" label-width="80px">
           <el-col :span='4'>
               <el-form-item label="项目名称">
                <el-input size="mini" v-model="form.projectTitle"></el-input>
              </el-form-item>
           </el-col>
           <el-col :span='4'>
               <el-form-item label="项目状态">
               <el-select  size="mini" v-model="form.state" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
              </el-form-item>
           </el-col>
           <el-col :span='4' style="margin: 0 10px 10px 20px">
               <el-button type="primary" @click="seach" size="mini">查询</el-button>
           </el-col>
       </el-form>
      <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%">
          <el-table-column
            prop="index"
            label="序号"
            >
          </el-table-column>
          <el-table-column
            prop="project_title"
            label="项目名称"
            >
          </el-table-column>
          <el-table-column
            prop="state"
            label="评审状态"
            >
          </el-table-column>
          <el-table-column
            prop="zf"
            label="评审分数"
            >
          </el-table-column>
          <el-table-column
            prop="score"
            label="操作">
            <template slot-scope="scope">
                <el-button
                @click='chack(scope.row)'
                type="text"
                size="small">
                项目评审
                </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-size="100"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
    </el-card>
    <el-dialog
        top='2vh'
        :title='project_title'
        :visible.sync="dialogVisible"
        width="1200px"
        >
        <div  class="boxoxo">
          <h3>研究项目表</h3>
            <el-form :label-position="labelPosition" :model="projectInfo" class="demo-form-inline">
              <el-form-item label="项目标题">
                <p>
                  {{projectInfo.project_title}}
                </p>
                
              </el-form-item>
               <el-form-item label="副标题">
                <p>
                  {{projectInfo.project_subtitle}}
                </p>
              </el-form-item>
               <el-form-item label="关键词">
                <p>
                  {{projectInfo.key_word}}
                </p>
              </el-form-item>
            </el-form>
            <el-form :label-position="labelPosition" :model="projectInfo" class="demo-form-inline">
              <el-form-item label="研究摘要">
                <p>
                  {{projectInfo.project_subject.summary}}
                </p>
              </el-form-item>
               <el-form-item label="项目介绍">
                <p>
                  {{projectInfo.project_subject.brief_introduction}}
                </p>
              </el-form-item>
               <el-form-item label="研究概括">
                 <h5>你的研究课题是如何产生的？是什么启发你进行研究的，研究的目的是什么？（300字以内）</h5>
                 <p>
                   {{projectInfo.project_subject.survey1}}
                 </p>
                 <h5>你和辅导老师、指导专家是如何建立关系的？你们的项目研究工作如何进行？（300字以内）</h5>
                 <p>
                   {{projectInfo.project_subject.survey2}}
                 </p>
                 <h5>你的研究工作持续了多长时间？详细阐明你是如何安排研究时间的，以及这样安排研究时间的理由。（300字以内）</h5>
                 <p>
                   {{projectInfo.project_subject.survey3}}
                 </p>
                 <h5>你的研究工作是在哪里进行的？得到哪些人（姓名、单位、职称、联系方式）在哪些方面提供的指导、培训或帮助？如研究方法、设备使用、研究材料、研究思路等，请具体说明。如其中涉及私人关系，须特别说明。（500字以内）</h5>
                 <p>
                   {{projectInfo.project_subject.survey4}}
                 </p>
                 <h5>你在研究过程中的主要工作是什么？如果你的工作涉及指导专家或其他项目成员，须详细说明你独立承担的每一部分工作内容和个人贡献。你的工作和其他专家或成员的相似或区别在哪里？（300字以内）</h5>
                 <p>
                   {{projectInfo.project_subject.survey5}}
                 </p>
                 <h5>你的研究工作对社会有什么益处？你对研究工作后期改进还有什么想法？（500字以内）</h5>
                 <p>
                   {{projectInfo.project_subject.survey6}}
                 </p>
                 <h5>你通过此次研究工作收获了什么？（300字以内）</h5>
                 <p>
                   {{projectInfo.project_subject.survey7}}
                 </p>
              </el-form-item>
              <el-form-item style="postion:relative" label="项目资料">
                <p>项目论文：<el-button @click="lookpdf(projectInfo.project_subject.data_submit1)" type="text">查看论文</el-button></p>
                <p>配图1: <img class="imgbox" @click="showimg(api + projectInfo.project_subject.data_submit2)" :src="api + projectInfo.project_subject.data_submit2" alt="暂无图片"></p>
                <p>配图2: <img class="imgbox" @click="showimg(api + projectInfo.project_subject.data_submit3)" :src="api + projectInfo.project_subject.data_submit3" alt="暂无图片"></p>
                <p>配图3: <img class="imgbox" @click="showimg(api + projectInfo.project_subject.data_submit4)" :src="api + projectInfo.project_subject.data_submit4" alt="暂无图片"></p>
                <div class="showimg" v-if="showimgnow">
                  <i @click="closeimg" class="el-icon-error"></i>
                  <img :src="showimgnow" alt="">
                </div>
              </el-form-item>
            </el-form>
            
            </div>
        <div class="table">
          <table width="100%">
            <tr>
              <td colspan="4">评审参考指标</td>
              <td>分数（不填默认为0）</td>
              
            </tr>
            <tr>
              <td colspan="2" rowspan="4">
                <div>创新与探索</div>
                <div>满分30分</div>
              </td>
              <td colspan="2">完整地阐述某个问题或某种需求</td>
              <td colspan="2" rowspan="4"><input @change="changeNumber(table.ct, 1)" type="number" style="height:100px; text-align:center" :min="0"  :max="10" v-model.number="table.ct"></td>
            </tr>
            <tr>
              <td colspan="2">解决上述问题或需求探索新的可能性和替代品</td>
              <!-- <td colspan="2"><input type="text"></td> -->
            </tr>
            <tr>
              <td colspan="2">解决方案标准的界定</td>
              <!-- <td colspan="2"><input type="text"></td> -->
            </tr>
            <tr>
              <td colspan="2">项目局限性的认识及展望</td>
              <!-- <td colspan="2"><input type="text"></td> -->
            </tr>
            <tr>
              <td colspan="2" rowspan="4">
                <div>设计与方法</div>
                <div>满分30分</div>
              </td>
              <td colspan="2">实验设计合理，过程完整</td>
              <td colspan="2" rowspan="4"><input @change="changeNumber(table.sf, 2)" type="number" style="height:100px; text-align:center" min="0"  max="10" v-model.number="table.sf"></td>
            </tr>
            <tr>
              <td colspan="2">掌握项目中理论和知识</td>
              <!-- <td colspan="2"><input type="text"></td> -->
            </tr>
            <tr>
              <td colspan="2">控制变量</td>
              <!-- <td colspan="2"><input type="text"></td> -->
            </tr>
            <tr>
              <td colspan="2">数据收集方法合理</td>
              <!-- <td colspan="2"><input type="text"></td> -->
            </tr>
            
            <tr>
              <td colspan="2" rowspan="4">
                <div>数据与结论</div>
                <div>满分30分</div>
              </td>
              <td colspan="2">数学、统计学方式的合理应用</td>
              <td colspan="2" rowspan="4"><input @change="changeNumber(table.sj, 3)" type="number" style="height:100px; text-align:center" min="0"  max="10" v-model.number="table.sj"></td>
            </tr>
            <tr>
              <td colspan="2">数据充分，能证明研究结论</td>
              <!-- <td colspan="2"><input type="text"></td> -->
            </tr>
            <tr>
              <td colspan="2">在不同条件下测试过，结论具有可再现性</td>
              <!-- <td colspan="2"><input type="text"></td> -->
            </tr>
            <tr>
              <td colspan="2">适用范围、应用推广前景（社会、经济效益或效果）</td>
              <!-- <td colspan="2"><input type="text"></td> -->
            </tr>

            <tr>
              <td colspan="2" rowspan="3">
                <div>演讲与展示</div>
                <div>满分10分</div>
              </td>
              <td colspan="2">内容组织具有逻辑性、合理性</td>
              <td colspan="2" rowspan="3"><input @change="changeNumber(table.yz, 4)" type="number" style="height:100px; text-align:center" min="0"  max="10" v-model.number="table.yz"></td>
            </tr>
            <tr>
              <td colspan="2">图标和图例准确明晰</td>
              <!-- <td colspan="2"><input type="text"></td> -->
            </tr>
            <tr>
              <td colspan="2">其他辅助文档（如实验记录、原始资料等）</td>
              <!-- <td colspan="2"><input type="text"></td> -->
            </tr>
            <tr>
              <td colspan="2">总分</td>
              <td colspan="4">{{ totalScore }}</td>
            </tr>
            <tr>
              <td colspan="2">评审意见</td>
              <td colspan="4"><input v-model="table.py" type="text" placeholder="评委必填"></td>
            </tr>
          </table>
          
        </div>
          
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="up">提交评审结果</el-button>
            <el-button size="mini" type="primary" @click="dialogVisible = false">返回项目列表</el-button>
        </div>
    </el-dialog>
    <div class="box">
      <c-pdf @closepdf="closepdf" v-show="isshowpdf" :pdfurl="testpdfurl"></c-pdf>
    </div>

    
    
  </div>
</template>

<script type="text/ecmascript-6">
import CPdf from "./CPdf";
export default {
  data() {
    return {
      showimgnow: null,
      api: process.env.API_ROOT,
      labelPosition: 'top',
      id: null,
      userid: null,
      testpdfurl: "",
      isshowpdf: false,
      total: null,
      currentPage1: 1,
      project_title: null,
      dialogVisible: false,
      innerVisible: false,
      tableData: [],
      projectInfo: {
        project_title: null,
        key_word: null,
        project_subtitle: null,
        project_subject: {
          summary: null,
          brief_introduction: null,
          survey1: null,
          survey2: null,
          survey3: null,
          survey4: null,
          survey5: null,
          survey6: null,
          survey7: null
        }
      },
      form: {
        projectTitle: null,
        state: null
      },
      options: [
        {
          value: null,
          label: "全部"
        },
        {
          value: false,
          label: "未评审"
        },
        {
          value: true,
          label: "已评审"
        }
      ],
      value: "",
      page: 1,
      table: {
        ct: null,
        sf: null,
        sj: null,
        yz: null,
        py: null
      }
    };
  },
  components: {
    // vueshowpdf
    CPdf
  },
  computed: {
    // 计算属性的 getter
    totalScore: function() {
      // `this` 指向 vm 实例
      return this.table.ct + this.table.sf + this.table.sj + this.table.yz;
    }
  },
  methods: {
    changeNumber(val, type) {
      if(typeof val === 'number')  {
        switch (type) {
          case 1:
            val > 30 ? this.table.ct = 30 : this.table.ct = val
            break;
          case 2:
            val > 30 ? this.table.sf = 30 : this.table.sf = val
            break;
          case 3:
            val > 30 ? this.table.sj = 30 : this.table.sj = val
            break;
          case 4:
            val > 10 ? this.table.yz = 10 : this.table.yz = val
            break;
        
          default:
            break;
        }
      }
    },
    lookpdf(val) {
      console.log(val)
      if(val === '') {
        this.$message.error('暂无内容！')
        return
      }
      let url  = this.api + '/pdf' + val;
          this.$http.get(`${url}`).then(res => {
            console.log(res)
          })
    },
    showimg(val) {
      if(this.showimgnow !== null) return false
      this.showimgnow = val

    },
    closeimg() {
      this.showimgnow = null
    },
    up() {
      let data = {
        ct: this.table.ct,
        sf: this.table.sf,
        sj: this.table.sj,
        yz: this.table.yz,
        zf: this.totalScore,
        py: this.table.py
      };
      if(this.table.ct === null && this.table.sf === null && this.table.sj === null && this.table.yz === null) {
        this.$message.error('请填写分数')
        return false
      }
      if(this.table.py === null){
         this.$message.error('请填写评委意见！')
         return false
      }
      this.$http.put(`/filing/sheet_score/${this.id}`, data).then(res => {
        this.$message.success("评审成功");
        this.getdata(this.form, this.page);
        this.dialogVisible = false;
      });
    },
    closepdf() {
      this.isshowpdf = false;
    },
    pdferr(errurl) {},
    handleSizeChange(val) {
      this.page = val;
      this.getdata(this.form, this.page);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getdata(this.form, this.page);
    },
    seach() {
      this.getdata(this.form, this.page);
    },
    getdata(data, page) {
      let datas = {
        params: data
      };
      this.$http.get(`/filing/sheet_score/list/${page}`, datas).then(res => {
        this.total = res.data.total;
        this.tableData = res.data.data.map((data, index) => {
          data.state === true
            ? (data.state = "已评审")
            : (data.state = "未评审");
          data.index = index + 1;
          return data;
        });
      });
    },
    show() {
      this.show = ture;
    },
    chack(val) {
      console.log(val)
      this.dialogVisible = true;
      this.project_title = "项目名称：" + val.project_title;
      this.userid = val.user_id;
      this.id = val.id
      this.table = {
        ct: val.ct,
        sf: val.sf,
        yz: val.yz,
        sj: val.sj,
        py: val.py
      };
      
      this.$http.get(`/filing/project/judges/get/${this.userid}`).then(res => {
        console.log(res);
        this.projectInfo = res.data;
      });
    }
  },
  mounted() {
    this.getdata(this.form, this.page);
  }
};
</script>

<style scoped lang="scss">
@import "./index.scss";
.imgbox {
  width: 100px;
  cursor: pointer;
}
.showimg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 80%;
  z-index: 9999;
  background: #fff;
  img {
    width: 100%;
  }
}
</style>
